<template>
  <div class="add-car">
    <el-dialog
        v-el-drag-dialog="{ drag: true, full: true, resize: true }"
        :title="datas.label"
        :close-on-click-modal="false"
        :visible.sync="visible"
        v-if="visible"
        width="40%"
        @close="closeMd"
        append-to-body>
      <div class="item-wrapper" v-if="datas.typeList.length">
        <div class="item" v-for="(item,index) in datas.typeList" :key="index">{{item}}</div>
      </div>
      <div class="noData" v-else>暂无数据</div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";

export default {
  name: "Alert",
  directives: {elDragDialog},
  props: ["state", 'datas'],
  data() {
    return {
      visible: this.state
    }
  },
  methods: {
    closeMd() {
      this.$emit("getMdState", false);
    },
  },
};
</script>
<style lang="less">
.item-wrapper {
  height: 400px;
  overflow: auto;
}
.noData {
  padding: 100px 0;
  text-align: center;
}
.item{
  display: inline-block;
  width: 20%;
  padding: 10px;
  white-space: nowrap;
}
</style>
